import React, { PureComponent } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import style from "styled-components";
import {Input, Button, message, DatePicker, Form, Modal,TreeSelect } from 'antd';
import Drawer from 'react-motion-drawer';
import { getPerGoodDeedsById, updatePerGoodDeeds,getTreeperBydepart,selectPerIdCardNum } from "../../../services/api";

const FormItem = Form.Item;
const dateFormat = 'YYYY/MM/DD';
const { TextArea } = Input;
const config = {
    rules: [
        {
            type: 'object',
            required: false,
            message: '请选择日期!'
        }
    ]
};

@connect(state => ({ profile: state.profile }))
@Form.create()

export default class EditIncentive extends PureComponent {
    constructor(props, context) {
        super(props, context);
        this.state = {
            openEdit: this.props.visiable,
            goodDeedsId: 0,
            treeData: [
                //树
                { title: "", key: "" }
              ],
            showPerId: 0,
            perId:'',
            goodDeeds: {
                idCardNo: "",
                name: "",
                happenDate: "",
                goodContent: "",
                remark: "",
            },
        };
    }

    /******************************生命周期******************************/

    componentWillReceiveProps(nextProps) {
        this.setState({ openEdit: nextProps.visible });
        if (nextProps.goodDeedsId !== this.state.goodDeedsId) {
            if (nextProps.goodDeedsId === 0 || nextProps.goodDeedsId === undefined) {
                return;
            }
            this.setState({
                goodDeedsId: nextProps.goodDeedsId
            });
            this.renderDate(nextProps.goodDeedsId);
        }
    }
    componentDidMount() {
        getTreeperBydepart({}).then(
          response => {
            console.log(response, "getTreeperBydepart-response");
            this.setState({ treeData: response.data });
          },
          err => {
            console.log(err, "getTreeperBydepart-err");
          }
        );
      }
    renderDate = (pro) => {
        console.log('id的值', pro);
        getPerGoodDeedsById({ goodDeedsId: pro }).then((data) => {
            console.log('shuju', data.data[0]);
            console.log('shuju111', data.data[0].idCardNo);
            //人员处理
            let perId = '';
            perId=data.data[0].perId;
            if (data.data) {
                const { setFieldsValue } = this.props.form;
                setFieldsValue({
                    idCardNo: data.data[0].idCardNo || '',
                    happenDate: data.data[0].happenDate || '',
                    goodContent: data.data[0].goodContent || '',
                    remark: data.data[0].remark || '',
                });
                this.setState({
                    perId,
                    goodDeeds: {
                        idCardNo: data.data[0].idCardNo || '',
                        happenDate: data.data[0].happenDate || '',
                        goodContent: data.data[0].goodContent || '',
                        remark: data.data[0].remark || '',
                    },
                });
            }
        }, (err) => {
            console.log(err);
        });
    }


    hideModal = () => {
        this.setState({
            visible: true,
        });
    }
    handleModalOk = (e) => {
        console.log(e);
        this.setState({
            visible: false,
            openEdit: false,
        });
    }
    handleModalCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }
    //树形选择器改编
    handleTreeSelectChange = (value, label, extra) => {
        const lastValue = this.state.perId;
        if(extra.triggerNode && extra.triggerNode.props && extra.triggerNode.props.treeType === "1"){
        console.log("部门");
        this.setState({perId:lastValue},this.selectPerIdCardNum());
        }else{
        this.setState({perId:value},this.selectPerIdCardNum())
        }
    }
    selectPerIdCardNum=()=>{
        selectPerIdCardNum({perId:this.state.perId}).then(
            response => {
              console.log(response, "selectPerIdCardNum-response");
              const { setFieldsValue } = this.props.form;
              setFieldsValue({idCardNo: response.data})
            },
            err => {
              console.log(err, "selectPerIdCardNum-err");
            }
          );
    }
    //表单提交
    handleGoodDeedsSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const rangeValue = values['happenDateDs'];
                values.happenDate = rangeValue.format('YYYY-MM-DD');
                values.goodDeedsId = this.state.goodDeedsId;
                values.perId=this.state.perId;
                updatePerGoodDeeds(values).then((data) => {
                    console.log(data);
                    this.setState({ openEdit: false });
                    this.props.tableUpdate();
                }, (err1) => {
                    console.log(err1);
                });
            }
        });
    }

    render() {
        const formItemLayout = {
            labelCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 7
                }
            },
            wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 17
                },
                md: {
                    span: 17
                }
            }
        };
        const { getFieldDecorator } = this.props.form;

        return (
            <Content>
                {/*好人好事详情*/}
                <Drawer
                    overlayColor="rgba(0, 0, 0,0)"
                    right
                    open={this.state.openEdit}
                    noTouchClose
                    width={600}
                    zIndex={2}
                    className="drawer-box"
                    onChange={(openEdit) => {
                        this.props.onChange(openEdit);
                        this.setState({ openEdit });
                    }}
                >
                    <div className="drawer">
                        <div className="drawer-header">好人好事详情</div>
                        <div className="drawer-content">
                            <Form style={{ marginTop: 24 }} onSubmit={this.handleGoodDeedsSubmit}>
                            {this.state.showPerId === 1 ?
                                <Formitem style={{ marginLeft: 50,marginBottom:0, 'display': 'inline-block' }}>
                                <Formlable >
                                <span style={{ color: '#f5222d' }}>* </span>&nbsp;被表彰奖励人员:</Formlable>
                                <TreeSelect
                                    value={this.state.perId}
                                    style={{
                                        width: 294,
                                        border: '1px solid #f5222d',
                                        borderRadius: 4
                                    }}
                                    dropdownStyle={{
                                        maxHeight: 400,
                                        overflow: "auto"
                                    }}
                                    treeData={this.state.treeData}
                                    onChange={this.handleTreeSelectChange}
                                    treeDefaultExpandAll
                                /> 
                                <div style={{ 'color': '#f5222d', marginLeft: 114 }}> 请选择奖励人员</div>
                                </Formitem>
                                :
                                <Formitem style={{ marginLeft: 50,marginBottom:24, 'display': 'inline-block' }}>
                                <Formlable >
                                <span style={{ color: '#f5222d' }}>* </span>被表彰奖励人员:</Formlable>
                                <TreeSelect
                                    value={this.state.perId}
                                    style={{
                                        width: 294,
                                    }}
                                    dropdownStyle={{
                                        maxHeight: 400,
                                        overflow: "auto"
                                    }}
                                    treeData={this.state.treeData}
                                    onChange={this.handleTreeSelectChange}
                                    treeDefaultExpandAll
                                /> 
                                <div/>
                                </Formitem> }
                                <FormItem {...formItemLayout} label="身份证号: ">
                                    {getFieldDecorator('idCardNo', {
                                        initialValue: this.state.goodDeeds.idCardNo,
                                        rules: [
                                            {
                                                required: true
                                            }
                                        ]
                                    })(
                                        <Input style={{ width: 294 }} disabled/>
                                        )}
                                </FormItem>
                                <FormItem {...formItemLayout} label="发生日期">
                                    {getFieldDecorator('happenDateDs', {
                                        initialValue: moment(this.state.goodDeeds.happenDate, dateFormat),
                                        rules: [
                                            {
                                                required: true, message: '请选择发生日期'
                                            }
                                        ]
                                    }, config)(<DatePicker style={{ width: 294 }} />)}
                                </FormItem>
                                <FormItem {...formItemLayout} label="好人好事内容">
                                    {getFieldDecorator('goodContent', {
                                        initialValue: this.state.goodDeeds.goodContent,
                                        rules: [
                                            {
                                                required: true, message: '请填写好人好事内容'
                                            }
                                        ]
                                    })(<TextArea style={{ width: 294 }} maxLength="500" rows={4} placeholder="请输入" />)}
                                </FormItem>
                                <FormItem {...formItemLayout} label="备注">
                                    {getFieldDecorator('remark', {
                                        initialValue: this.state.goodDeeds.remark,
                                        rules: [
                                            {
                                                required: false
                                            }
                                        ]
                                    })(<TextArea style={{ width: 294 }} maxLength="500" rows={4} placeholder="请输入" />)}
                                </FormItem>
                            </Form>
                        </div>
                        <div className="drawer-footer">
                            <Button onClick={this.hideModal}>返回</Button>
                            <Button type="primary" onClick={this.handleGoodDeedsSubmit}>提交</Button>
                        </div>
                    </div>
                </Drawer>
                <Modal
                    title="提示"
                    visible={this.state.visible}
                    onOk={this.handleModalOk}
                    onCancel={this.handleModalCancel}
                >
                    <p>返回会取消您已填写的内容，确定返回？</p>
                </Modal>
            </Content>
        );
    }
}

/************************样式************************/

const Content = style.div`{
  font-size: 14px;
  color: rgba(0,0,0,0.65);
  .searchpanel{
     margin-bottom:16px;
    .post{
      margin:0 8px 0 16px;
    }
  }
  .btns{
    margin-top:16px;
  }
}`;
const Formitem=style.label`{

    font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.65);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: top;
    -webkit-transition: margin 0.15s steps(1);
    transition: margin 0.15s steps(1);
  }`;
  const Formlable=style.span`{
    text-align: right;
    vertical-align: middle;
    line-height: 39.9999px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    margin-right:8px;
  }`;
